<template>
  <div>
    <n-grid cols="5" item-responsive>
      <n-grid-item>
        <n-tree
          block-line
          :data="scheduleList"
          @update:selected-keys="selectedTree"
          expand-on-click
          :on-load="onLoad"
          selectable
          key-field="depcode"
          label-field="depname"
          style="width: 270px;padding-left: 30px"

        />
      </n-grid-item>
      <n-grid-item span="0 400:1 600:4 800:4">
        <schedule-item v-for="schedule in scheduleDataList" :item="schedule" @itemChange="scheduleItemChange"/>

        <!-- 分页 -->
        <n-pagination style="margin-top: 5px;" v-model:page="pageObj.page" :page-count="100" :item-count="pageObj.total" :on-update:page="pageUpdate" />
        <!-- 排班详情 -->
        <BasicTable
          v-if="selectDepartId != null && workDate != null"
          :columns="scheduleColumns"
          :request="scheduleLoadDataTable"
          ref="scheduleRef"
          :row-key="(row) => row.id"
          :scroll-x="1090">
        </BasicTable>
      </n-grid-item>


    </n-grid>
  </div>

</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { getDeptByHoscode,getScheduleRule, getScheduleDetail } from "@/api/yygh/hosp";
import scheduleItem from "./schedule-item.vue";
import {columns as scheduleColumns} from './scheduleColumns'
import { BasicTable, TableAction } from '@/components/Table';
import { formatToDate } from "../../../utils/dateUtil";

const scheduleList = ref([])

const hospId = ref("1000_0")// 医院id

import {useRoute } from "vue-router";
const route = useRoute()

if(route.query.shopId) {
  hospId.value = route.query.shopId;
}
const workDate = ref(null) // 工作时间
const selectDepartId = ref(null) // 当前部门id
const pageObj = reactive({
  page: 1,
  limit: 7,
  total: 100,
  pageNum: 10
})
onMounted(async () => {
  let tempArr = await getDeptByHoscode(hospId.value).then(res => res.data);
  console.log("tempArr", tempArr)

  tempArr.forEach(temp=> {
    temp.children.forEach(temp2 => temp2.isLeaf = temp2.children.length == 0);
  })
  if(tempArr.length != 0) selectDepartId.value = tempArr[0].children[0].depcode
  scheduleList.value = tempArr
  await scheduleReload()

})

const scheduleDataList = ref([])

function scheduleReload() {
  getScheduleRule(pageObj.page, pageObj.limit, hospId.value , selectDepartId.value).then(res => {
    console.log("getScheduleRule", res.data)
    scheduleDataList.value = res.data.bookingScheduleRuleList;

    if(res.data.bookingScheduleRuleList.length > 0) {
      workDate.value = formatToDate(res.data.bookingScheduleRuleList[0].workDate);
    }
    pageObj.total = res.data.total;
  })
}
// 选中: 点击那一栏
function selectedTree(keys) {
  console.log('selectedTree', keys);
  if(keys.length != 0) selectDepartId.value = keys[0]
  scheduleReload();
}

// 分页数据发生改变
const pageUpdate  =(val) => {
  console.log("分页数据发生改变", val)
  pageObj.page = val
  scheduleReload()
}


const scheduleRef = ref(null)

// 表格数据
const scheduleLoadDataTable =() => {
  return getScheduleDetail(hospId.value, selectDepartId.value, workDate.value)
}

// 点击排班切换, 医院进来

const scheduleItemChange =(workDateStr) => {
  console.log("scheduleItemChange", workDateStr,selectDepartId.value)
  workDate.value = workDateStr;
  scheduleRef.value.reload();
}
</script>
